<!-- swiper -->
<style scoped rel="stylesheet/scss" lang="scss">
	@import '../../../css/public.scss';
	@import '../../../utils/swiper/swiper3.06.min.css';
	

	.swiper-container{
		width: 100%;
		height: 380px;
		>.swiper-pagination{
			bottom:20px;
			span.swiper-pagination-bullet{
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: #fff;
				opacity: 1;
			}
			span.swiper-pagination-bullet-active{
				background-color: $themeColor;
			}


		}
		
	}

</style>

<template>
	<swiper :options="swiperOption" ref="mySwiper">
		<swiper-slide v-for="(item, index) in slideData" @click="addSeiper">
			<a href="#">
				<img :src="item">
			</a>
		</swiper-slide>
		<div class="swiper-pagination"  slot="pagination"></div>
		
	</swiper>
</template>

<script>

	import { swiper, swiperSlide } from 'vue-awesome-swiper';


	export default {
		data() {
			return {
				slideData: ['images/banner_01.jpg', 'images/banner_01.jpg', 'images/banner_01.jpg',],
				swiperOption: {

					notNextTick: true,
		          // swiper configs 所有的配置同swiper官方api配置
		          autoplay: 5000,
		          grabCursor : true,
		          setWrapperSize :true,
		          autoHeight: true,
		          loop: true,
		          pagination : '.swiper-pagination',
		          paginationClickable :true,
		          
		          mousewheelControl : true,
		          observeParents:true,
		          // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
		          debugger: true,
		      }
		  }
		},
		components: {
			swiper, 
			swiperSlide
		},
		methods: {
			addSeiper(){
				this.slideData.push('images/banner_01.jpg')
			},
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.swiper
			}
		},
		mounted() {
		      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
		      // console.log('this is current swiper instance object', this.swiper)
		      // this.swiper.slideTo(3, 1000, false)
		      this.addSeiper();
		  }




		}
	</script>
